import { Button, Form, Input, Select } from 'antd'
import { useEffect } from 'react'
import './index.less'
export default function EmailLoginComponent(props: { trigger: boolean }) {
  const [form] = Form.useForm()
  const onFinish = (vals: { phone: string; code: string }) => {
    console.log(vals)
  }
  useEffect(() => {
    form.resetFields()
  }, [props.trigger])
  const suffixSelector = (
    <Form.Item name="suffix" noStyle initialValue="@7sef.com">
      <Select>
        <Select.Option value="@7sef.com">@7sef.com</Select.Option>
      </Select>
    </Form.Item>
  )
  return (
    <div className="email_login_page">
      <Form form={form} onFinish={onFinish}>
        <Form.Item name="phone" rules={[{ required: true, message: '请输入邮箱' }]}>
          <Input placeholder="请输入邮箱" addonAfter={suffixSelector} />
        </Form.Item>
        <Form.Item name="code" rules={[{ required: true, message: '请输入密码' }]}>
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  )
}
